<template>
	<view class="page">
		<view class="nav nav_bar" style="background: #D5BBFF">
			<uni-nav-bar left-icon="left" title="礼物墙" :border='false' color="#333" background-color="#D5BBFF"
				@clickLeft="$native.backAction()"></uni-nav-bar>
		</view>
		<view class="nav_box"></view>

		<view class="flex_r_around" v-if="list.length">
			<view class="title flex_center">
				<image :src="$util.prefix('live/gift_grid_title_left.png')"></image>
				<text>已点亮</text>
				<image :src="$util.prefix('live/gift_grid_title_right.png')"></image>
			</view>
		</view>

		<view class="grid">
			<u-grid :border="false" :col="4">
				<u-grid-item v-for="(item,index) in list" :key="index" @click="openDetail(item)">
					<view class="item have flex_c">
						<image :src="item.image" mode="aspectFill"></image>
						<text>{{ item.name }}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>

		<view class="flex_r_around" v-if="not_have_list.length">
			<view class="title flex_center">
				<image :src="$util.prefix('live/gift_grid_title_left.png')"></image>
				<text>未点亮</text>
				<image :src="$util.prefix('live/gift_grid_title_right.png')"></image>
			</view>
		</view>

		<view class="grid">
			<u-grid :border="false" :col="4">
				<u-grid-item v-for="(item,index) in not_have_list" :key="index">
					<view class="item nohave flex_c">
						<image :src="item.image" mode="aspectFill"></image>
						<text>{{ item.name }}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>

		<view @touchmove.stop.prevent="preventHandler">
			<giftPopup ref="giftPopup"></giftPopup>
		</view>

	</view>
</template>

<script>
	import giftPopup from './components/gift-popup/gift-popup.vue';
	export default {
		components: {
			giftPopup,
		},
		data() {
			return {
				user_id: 0,
				list: [],
				not_have_list: [],

				gift_id: 0,
			}
		},
		methods: {
			preventHandler() {
				return;
			},

			getList() {
				this.$get('/gift/getGiftStatus', {
					user_id: this.user_id,
					type: 2
				}).then(res => {
					this.list = res.data.list;
					this.not_have_list = res.data.not_have_list;
				})
			},

			openDetail(item) {
				this.$refs.giftPopup.user_id = this.user_id;
				this.$refs.giftPopup.gift_id = item.id;
				this.$refs.giftPopup.open();
			},
		},
		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			this.user_id = option.user_id;
			this.getList();
		}
	}
</script>

<style lang="less" scoped>
	.page {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient(180deg, #D5BBFF 16%, #E7DBFD 40%, #F2F2F5 100%);
		padding: 0 32rpx 32rpx;
	}

	.title {
		margin: 40rpx 0 24rpx;

		text {
			font-weight: 500;
			font-size: 28rpx;
			color: #3E00CD;
			line-height: 40rpx;
			margin: 0 16rpx;
		}

		image {
			width: 138rpx;
			height: 24rpx;
		}
	}

	.grid {
		.item {
			width: 160rpx;
			border-radius: 24rpx;
			padding-bottom: 24rpx;
			margin-bottom: 16rpx;

			image {
				width: 128rpx;
				height: 128rpx;
			}

			text {
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}

		.have {
			background: linear-gradient(180deg, #9A42F9 0%, #6A83FF 100%);
			opacity: 1;
		}

		.nohave {
			background: #D3C0F3;
			opacity: 0.8;
		}
	}
</style>